<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS操作表格</title>
		<style type="text/css">
			th,td{
				padding: 10px 25px;
			}
			#tr_one{
				background-color: dodgerblue;
			}
			.odd{
				background-color: #DAA520;
			}
			.even{
				background-color: #A9A9A9;
			}
		</style>
	</head>
	<body>
		<center>
			<button type="button" onclick="add()">添加书籍</button>
			<hr >
			<label>请输入书名：</label>
			<input type="text" placeholder="请输入书名" id="bookName" value="" />
			<label>请输入作者名：</label>
			<input type="text" placeholder="请输入作者名" id="uname" value="" />
			<label>请输入价格：</label>
			<input type="text" pattern="请输入价格" id="price" value="" />
			<hr >
			<table id="tab" border="0" cellspacing="0" cellpadding="0">
				<tr id="tr_one">
					<th>
						<input type="checkbox" name="tab_che" id="" />
					</th>
					<th>书名</th>
					<th>作者</th>
					<th>价格</th>
					<th>操作</th>
				</tr>
				<tr class="odd">
					<td>
						<input type="checkbox" name="tab_che" id="" />
					</td>
					<td>java开发从入门到入土</td>
					<td>张三</td>
					<td>99.9￥</td>
					<td>
						<button type="button" onclick="delRow(this)">删 除</button>
					</td>
				</tr>
				<tr class="even">
					<td>
						<input type="checkbox" name="tab_che" id="" />
					</td>
					<td>Python开发从入门到入土</td>
					<td>李四</td>
					<td>59.8￥</td>
					<td>
						<button type="button" onclick="delRow(this)">删 除</button>
					</td>
				</tr>
				<tr class="odd" id="tr3">
					<td>
						<input type="checkbox" name="tab_che" id="" />
					</td>
					<td>PHP开发从入门到入土</td>
					<td>王五</td>
					<td>39.6￥</td>
					<td>
						<button type="button" onclick="delRow(this)">删 除</button>
					</td>
				</tr>
			</table>
		</center>
		
	</body>
	<script type="text/javascript">
		// 删除行
		function delRow(btn){
			// 获取表格对象
			let tab = document.getElementById("tab");
			console.log(tab);
			// 通过表格对象获取所有行
			/* let tab_rows = tab.rows;
			console.log(tab_rows); */
			// 获取行的角标
			/* for(let i=0; i<tab_rows.length; i++){
				console.log(tab_rows[i].rowIndex);
			} */
			// 获取当前点击所在的行
			let row = btn.parentElement.parentElement;
			console.log(row);
			// 通过表格的行对象获取当前行号
			let index = row.rowIndex;
			// 通过表格对象删除行
			tab.deleteRow(index);
		}
		
		// 添加行和列数据
		function add(){
			// 获取用户输入的内容
			let inp_b_name_vla = document.getElementById("bookName").value;
			/* console.log(inp_b_name_vla); */
			let inp_uname_val = document.getElementById("uname").value;
			let inp_price_val = document.getElementById("price").value;
			// 获取表格对象
			let tab = document.getElementById("tab");
			// 添加行对象
			let row = tab.insertRow(tab.rows.length);// tab.rows.length获取最后一个行角标
			// 通过行对象添加列
			// 添加内容
			row.insertCell(0).innerHTML = "<td><input type=\"checkbox\" name=\"tab_che\" /></td>";
			row.insertCell(1).innerHTML = inp_b_name_vla;
			row.insertCell(2).innerHTML = inp_uname_val;
			row.insertCell(3).innerHTML = inp_price_val;
			row.insertCell(4).innerHTML = "<td><button type=\"button\" onclick=\"delRow(this)\">删 除</button></td>";
			
			// 设置元素class属性值
			row.className = "odd";
			
		}
		
		
		function fun2(){
			// 获取行对象
			let row = document.getElementById("tr3");
			
			// 通过行对象获取所有列
			let row_cells = row.cells;
			console.log(row_cells);
			// 通过角标获取对应的列
			console.log(row_cells[2]);
		}
		fun2();
	</script>
</html>
